<template>
  <div class="common-layout" style="height:100%;">
    <el-container style="height:100%;">
      <el-header style="padding: 0;display: flex;">
        <div style="width: 180px;background-color: #001529;padding: 10px; " >
          <div style="background-color: #5d5a61;   box-shadow: inset 0 0 8px #a98c8c; height: 40px;line-height: 40px;font-size: 20px;text-align: center; color: #fff">
            超市管理系统
          </div>
        </div>
        <div style="flex:1;display: flex;align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd;">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/manager/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="router.currentRoute.value.meta.name !== '首页'">{{router.currentRoute.value.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div key="1" class="block" style="border-bottom: 1px solid #ddd; padding-right: 40px;display: flex; align-items: center;">
          <el-dropdown placement="bottom-start">
            <div class="custom-dropdown" style="display: flex;align-items: center;">
              <img v-if="data.user?.avatar" style="width: 40px; height: 40px; border-radius: 50%;" :src="data.user?.avatar" alt="">
              <img v-else style="width: 40px; height: 40px; border-radius: 50%;" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
              <span  style="margin-left: 5px">{{ data.user?.name }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item @click="router.push('/manager/gerenxinxi')">个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container style="height: 100%">
        <el-aside width="200px" style="background-color: #21497a;">
        <Menu></Menu>
        </el-aside>
        <el-main style="background-color: #fdfdfd;padding: 20px;">
            <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {
  ArrowRight
} from '@element-plus/icons-vue'
import router from "@/router/index.js";
import Menu from "@/views/Manager/Menu.vue"

window.addEventListener('setItemEvent', (e) => {
  data.user = JSON.parse(e.newValue)
})
const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
})
const logout=() =>{
  localStorage.removeItem('code_user')
  location.href = '/login'
}
</script>
<style scoped>
.el-menu{
  height: 100%;
  border:0!important;
}
.custom-dropdown:focus-visible {
  outline: unset;
}
.el-dropdown{
  cursor: pointer;
  border: none;
}
</style>